<template>
  <div>

    <div class="header">

      <!-- <div style="margin-right:20px">
        <Button class="button" type="info" @click="toAdd">新增普通用户</Button>
      </div> -->

      <div class="input">
        <i-form :model="formItem" style="width:150px;margin-top:15px">
          <Form-item label="">
              <i-input :value.sync="formItem.input" placeholder="请输入账号"></i-input>
          </Form-item>
        </i-form>
      </div>

      <div>
         <Button class="button" type="info" @click="toCheck">查找</Button>
      </div>
    </div>

    <!-- 标题 -->
    <Table border :columns="addUser" :data="list">
      <template slot-scope="{ row }" slot="title">
        <strong>{{ row.title }}</strong>
      </template>

     <!-- 图片 -->
      <template slot-scope="{ row }" slot="image" class="image-tip">
         <img width="100%" :src="row.image" alt="">
      </template>

      <!-- 日期 -->
      <template slot-scope="{ row }" slot="release_time">
         <span>{{ row.release_time | dateformat('YYYY-MM-DD') }}</span>
      </template>

      <!-- 状态 -->
      <template slot-scope="{ row }" slot="status">
          <span v-if="row.status=='0'">未审核</span>
          <span v-if="row.status=='1'">启用</span>
          <span v-if="row.status=='2'">停用</span>
      </template>

      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 8px" @click="show(index)">查看</Button>
        <Button type="error" size="small" style="margin-right: 8px" @click="appval(index)">审核</Button>
      </template>
    </Table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formItem: {
        input: ''
      },
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        account: undefined,
        nackname: undefined,
        sort: '+id'
      },
      addUser: [
        {
          title: '标题',
          slot: 'title'
        },
        {
          title: '发布者',
          key: 'realname'
        },
        {
          title: '封面',
          slot: 'image',
          width: 100
        },
        {
          title: '发布时间',
          slot: 'release_time'
        },
        {
          title: '状态',
          slot: 'status'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      list: []
    }
  },
  created () {
    console.log('初始化')
    this.getList()
  },
  methods: {

    // 获取数据
    getList () {
      this.listLoading = true
      // 发起请求
      this.$http({
        url: '/getAnnounceList', // 请求地址
        method: 'get', // 设置请求方式
        params: this.listQuery // 把注册参数放进请求中
      })
        .then((e) => { // 处理请求返回的结果
          console.log(e.data)
          this.list = e.data.data
          // this.total = e.data.total
          // this.listLoading = false
        })
        .catch((e) => { // 处理请求发生的异常
          console.log(e)
        })
    },
    // 模糊查询
    toCheck () {

    },

    resetForm () {
      this.addUser = {
        id: undefined,
        account: '',
        name: '',
        age: '',
        sex: '',
        email: ''
      }
    },
    show (index) {
      this.$Modal.info({
        title: '修改'

      })
    },
    toParent (index) {
      let user_id = this.list[index].id
      this.$router.push({
        name: 'parent',
        params: {
          user_id
        }
      })
    },
    appval (index) {
      let params = {}
      let warning = '停用'
      if (this.list[index].status === '1') {
        warning = '停用'
        params = {
          announce_id: this.list[index].announce_id,
          status: '2'
        }
      } else {
        warning = '启用'
        params = {
          announce_id: this.list[index].announce_id,
          status: '1'
        }
      }

      this.$Modal.confirm({
        title: '确认对话框标题',
        content: '是否' + warning + '该公告?',
        onOk: () => {
        //  this.$Message.info('点击了确定')
          this.$http({
            url: '/update', // 请求地址
            method: 'post', // 设置请求方式
            data: params
          }).then((e) => {
            this.dialogFormVisible = false
            if (e.data.code === '1') {
              this.list[index].status = params.status
              this.$Message.info('操作成功')
            } else {
              this.$Message.info('操作失败')
            }
          })
        },
        onCancel: () => {
          // this.$Message.info('点击了取消')
        }
      })
    },
    // 增加用户
    toAdd () {
      console.log('增加用户')
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      // 关闭时清除
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      // this.$router.replace({
      //   path: 'add'
      // })
    }
  }
}
</script>

<style lang="less" scoped>
.button {
  margin: 10px;
}
.header{
  display: flex;
  align-items: center;
}
.header .input{
  margin-top:10px
}
.img{
  width: 50%;
  height: 50%;
}
</style>
